<template>
  <div @click="pageClick">
    <el-row class="sectionItem">
      <el-col :span="4">
        <el-card>
          <div slot="header">
            <span style="font-size:18px;">拖拽列表</span>
          </div>
          <el-row :gutter="10" style="text-align:center;">
            <el-col v-for="(section,index) in sectionConfig" :key="index" :span="12">
              <div class="sectionbox" @click="sectionTypeSelect(section)">
                <i class="icon" :class="section.icon" />
                <div>{{ section.title }}</div>
              </div>
            </el-col>
            <!-- <el-col :span="12">
              <div class="sectionbox">
                <i class="el-icon-c-scale-to-original icon" />
                <div>表单项</div>
              </div>
            </el-col> -->
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="20" style="position:relative;padding:0 10px;">
        <el-card>
          <div style="display:flex;flex-direction: row;padding-bottom:10px;">
            <el-button-group>
              <el-button v-for="(pater,i) in paperList" :key="i" :type="paterIndex===i?'primary':''" size="small" @click="paterChange(i)">{{ pater.title }}</el-button>
            </el-button-group>
            <div style="padding:0 10px ">
              <el-input v-model="paterSize.width" size="small" placeholder="纸张宽度" style="width:100px" />
              <span>-</span>
              <el-input v-model="paterSize.height" size="small" placeholder="纸张高度" style="width:100px" />
              <el-button type="primary" size="small">自定义</el-button>
            </div>
            <div>
              <el-button-group>
                <el-button size="small" type="primary" @click="sectionClearAll">清空</el-button>
                <el-button size="small" type="primary">保存</el-button>
              </el-button-group>

              <el-button-group>
                <el-button size="small" type="primary" @click="sectionView">预览</el-button>
                <el-button size="small" type="primary" @click="PrintNow">打印</el-button>
              </el-button-group>
            </div>
          </div>
          <div :style="{overflow:'auto',maxWidth:'100%',height:mainHeight+'px',width:(paterSize.width+20)+'mm'}">
            <div class="ruleMain">
              <img src="@/assets/rule1.png" class="rule rule1">
              <img src="@/assets/rule2.png" class="rule rule2">
              <div id="paterMain" class="paterMain" :style="{width:paterSize.width+'mm',height:paterSize.height+'mm'}">
                <draggable
                  v-for="(section,sectionIndex) in sections"
                  :key="sectionIndex"
                  :x="section.x"
                  :y="section.y"
                  :w="section.width"
                  :h="section.height"
                  :parent="true"
                  class="sectionDrag"
                  @dragging="(x,y)=>onDragIng(sectionIndex,x,y)"
                  @resizing="(x,y,width,height)=>onResize(sectionIndex,x,y,width,height)"
                  @activated="onClick(sectionIndex)"
                >
                  <div v-if="section.type==='text'" class="sectionText" :style="{lineHeight:section.lineHeight+'px',fontSize:section.fontSize+'px',textAlign:section.textAlign,fontWeight:section.fontWeight}">
                    <span v-if="section.textType==='field'">{{ section.field||'字段' }}</span>
                    <span v-else>{{ section.text||'文本' }}</span>
                  </div>
                  <div v-else-if="section.type==='formitem'" class="sectionFormItem" :style="{lineHeight:section.lineHeight+'px',fontSize:section.fontSize+'px',textAlign:section.textAlign,fontWeight:section.fontWeight}">
                    <span>{{ section.text||'标题' }}：</span>
                    <span>{{ section.field||'字段' }}</span>
                  </div>
                  <div v-else-if="section.type==='image'" class="sectionImage">
                    <img v-if="section.urlType==='field'&&section.urlDemo" :src="section.urlDemo" :style="{width:section.width+'px',height:section.height+'px'}">
                    <img v-else-if="section.urlType==='url'&&section.url" :src="section.url" :style="{width:section.width+'px',height:section.height+'px'}">
                  </div>
                  <div v-else-if="section.type==='qr'" class="sectionQr">
                    <vueQr v-if="section.codeType==='field'" :size="section.width" :text="section.codeDemo||'123456'" />
                    <vueQr v-else-if="section.codeType==='code'" :size="section.width" :text="section.code||'123456'" />
                  </div>
                  <div v-else-if="section.type==='table'" class="sectionTable">
                    <table border="1" cellspacing="0" cellpadding="0" :width="section.width">
                      <thead>
                        <tr>
                          <th v-for="(column,i) in section.columns" :key="i" :width="column.width" :style="{lineHeight:section.headerLineHeight+'px'}">{{ column.title }}</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="(item,i) in section.list" :key="i">
                          <td v-for="(column,c) in section.columns" :key="c" :align="column.align" :style="{lineHeight:section.bodyLineHeight+'px'}">{{ item[column.value] }}</td>
                        </tr>
                      </tbody>
                    </table>
                    <!-- <el-table :data="section.list" border>
                      <el-table-column v-for="(column,i) in section.columns" :key="i" :label="column.title" :prop="column.value" :width="column.width" :align="column.align||'left'" />
                    </el-table> -->
                  </div>
                  <!-- <p>X: {{ section.x }} / Y: {{ section.y }} - Width: {{ section.width }} / Height: {{ section.height }}</p> -->
                  <div v-if="sectionIndex===sectionActiveIndex" class="sectionDesc">
                    {{ section.desc }}
                    x/y]:[{{ section.x }}/{{ section.y }}] w/h:[{{ section.width }}/{{ section.height }}]
                  </div>
                </draggable>
              </div>
            </div>
          </div>
        </el-card>
        <el-button v-if="sectionActiveIndex>-1&&!sectionDataIsShow" type="" icon="el-icon-arrow-left" style="position:absolute;top:0;right:0;" @click="sectionDataShow" />
      </el-col>
    </el-row>
    <RightDialog :visible.sync="sectionDataIsShow" :modal="false" :show-close="false" :width="450">
      <div v-if="sectionInfo" class="rightDialog">
        <div class="dialog-title" style="">
          <i class="el-icon-arrow-right" style="font-size:26px;" @click="sectionDataHide" />
          <span>参数设置：</span>
          <span>{{ sectionInfo.title }}</span>
        </div>
        <el-form size="mini" label-position="top">
          <div v-if="sectionInfo.type==='text'">
            <div v-if="sectionInfo.textType==='text'">
              <el-form-item label="文本内容">
                <el-input v-model="sectionInfo.text" type="textarea" placeholder="请输入文本内容" />
              </el-form-item>
            </div>
            <div v-else>
              <el-form-item label="字段名">
                <el-input v-model="sectionInfo.field" placeholder="请输入字段名" />
              </el-form-item>
            </div>
            <el-form-item label="数据类型">
              <el-select v-model="sectionInfo.textType" placeholder="">
                <el-option label="固定文本" value="text" />
                <el-option label="字段" value="field" />
              </el-select>
            </el-form-item>
          </div>
          <div v-else-if="sectionInfo.type==='formitem'">
            <el-form-item label="标题">
              <el-input v-model="sectionInfo.text" placeholder="请输入标题内容" />
            </el-form-item>
            <el-form-item label="字段名">
              <el-input v-model="sectionInfo.field" placeholder="请输入字段名" />
            </el-form-item>
          </div>
          <div v-else-if="sectionInfo.type==='image'">
            <div v-if="sectionInfo.urlType==='field'">
              <el-form-item label="模拟地址">
                <el-input v-model="sectionInfo.urlDemo" placeholder="请输入图片模拟地址" clearable>
                  <template slot="append">
                    <el-button type="primary" size="small" @click="sectionInfo.urlDemo=demoImg">使用示例地址</el-button>
                  </template>
                </el-input>
              </el-form-item>
            </div>
            <div v-else>
              <el-form-item label="图片地址">
                <el-input v-model="sectionInfo.url" placeholder="请输入图片地址" />
              </el-form-item>
            </div>
            <el-row>
              <el-col :span="12">
                <el-form-item label="数据类型">
                  <el-select v-model="sectionInfo.urlType" placeholder="">
                    <el-option label="固定地址" value="url" />
                    <el-option label="字段" value="field" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-if="sectionInfo.urlType==='field'" :span="12">
                <el-form-item label="字段名">
                  <el-input v-model="sectionInfo.field" placeholder="请输入字段名" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div v-else-if="sectionInfo.type==='qr'">
            <div v-if="sectionInfo.codeType==='field'">
              <el-form-item label="模拟内容">
                <el-input v-model="sectionInfo.codeDemo" type="textarea" placeholder="请输入模拟内容" />
              </el-form-item>
            </div>
            <div v-else>
              <el-form-item label="二维码内容">
                <el-input v-model="sectionInfo.code" type="textarea" placeholder="请输入二维码内容" />
              </el-form-item>
            </div>
            <el-row>
              <el-col :span="12">
                <el-form-item label="数据类型">
                  <el-select v-model="sectionInfo.codeType" placeholder="">
                    <el-option label="固定内容" value="code" />
                    <el-option label="字段" value="field" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-if="sectionInfo.codeType==='field'" :span="12">
                <el-form-item label="字段名">
                  <el-input v-model="sectionInfo.field" placeholder="请输入字段名" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div v-else-if="sectionInfo.type==='table'">
            <el-row>
              <el-col :span="12">
                <el-form-item label="表头行高">
                  <el-select v-model="sectionInfo.headerLineHeight" placeholder="">
                    <el-option v-for="(option,i) in lineHeightOptions" :key="i" :label="option.title" :value="option.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="表内行高">
                  <el-select v-model="sectionInfo.bodyLineHeight" placeholder="">
                    <el-option v-for="(option,i) in lineHeightOptions" :key="i" :label="option.title" :value="option.value" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12"><b>表格列管理</b></el-col>
              <el-col :span="12" style="text-align:right"><el-button type="text" size="mini" @click="tableColumnAdd">添加列</el-button></el-col>
            </el-row>
            <el-table :data="tableColumns" border>
              <el-table-column label="标题">
                <template slot-scope="scope">
                  <el-input v-model="tableColumns[scope.$index].title" placeholder="标题" size="mini" />
                </template>
              </el-table-column>
              <el-table-column label="字段名">
                <template slot-scope="scope">
                  <el-input v-model="tableColumns[scope.$index].value" placeholder="字段名" size="mini" />
                </template>
              </el-table-column>
              <el-table-column label="列宽">
                <template slot-scope="scope">
                  <el-input v-model="tableColumns[scope.$index].width" placeholder="列宽" size="mini" />
                </template>
              </el-table-column>
              <el-table-column label="对齐">
                <template slot-scope="scope">
                  <el-select v-model="tableColumns[scope.$index].align" placeholder="" size="mini">
                    <el-option label="默认" value="left" />
                    <el-option label="居中" value="center" />
                    <el-option label="居右" value="right" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="" width="50">
                <template slot-scope="scope">
                  <el-button type="text" size="mini" class="s" @click="tableColumnDel(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-row style="padding-top:10px;">
              <el-col :span="12"><b>模拟数据管理</b></el-col>
              <el-col v-if="tableColumns.length>0" :span="12" style="text-align:right"><el-button type="text" size="mini" @click="tableListAdd">添加数据</el-button></el-col>
            </el-row>
            <el-table v-if="tableColumns.length>0" border :data="tableList">
              <el-table-column v-for="(column,i) in tableColumns" :key="i" :label="column.title">
                <template slot-scope="scope">
                  <el-input v-model="tableList[scope.$index][column.value]" :placeholder="column.title" size="mini" />
                </template>
              </el-table-column>
              <el-table-column label="" width="50">
                <template slot-scope="scope">
                  <el-button type="text" size="mini" class="s" @click="tableListDel(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div v-else style="padding:5px;color:#999;">
              <div>请先添加列数据</div>
              <div class="s"><el-button type="text" size="mini" @click="useDemoTable">使用模拟数据</el-button></div>
            </div>
          </div>
          <el-row v-if="sectionInfo.type==='text'||sectionInfo.type==='formitem'">
            <el-col :span="12">
              <el-form-item label="字体大小">
                <el-select v-model="sectionInfo.fontSize" placeholder="">
                  <el-option v-for="(option,i) in fontSizeOptions" :key="i" :label="option.title" :value="option.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="字体粗细">
                <el-select v-model="sectionInfo.fontWeight" placeholder="">
                  <el-option label="正常" value="normal" />
                  <el-option label="粗体" value="bolder" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="字体对齐">
                <el-select v-model="sectionInfo.textAlign" placeholder="">
                  <el-option label="左对齐" value="left" />
                  <el-option label="居中" value="center" />
                  <el-option label="右对齐" value="right" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="字体行高">
                <el-select v-model="sectionInfo.lineHeight" placeholder="">
                  <el-option v-for="(option,i) in lineHeightOptions" :key="i" :label="option.title" :value="option.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="描述">
            <el-input v-model="sectionInfo.desc" type="textarea" placeholder="请输入相关描述(可选)" />
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" size="mini" @click="sectionDataSave">保存</el-button>
          <el-button type="danger" size="mini" @click="sectionDataRemove">移除</el-button>
        </div>
      </div>
    </RightDialog>
    <el-dialog :visible.sync="viewDialogIsShow" title="模板预览" :width="(paterSize.width+10)+'mm'">
      <div slot="title">
        <el-row>
          <el-col :span="16">模板预览</el-col>
          <el-col :span="8">
            <el-button type="primary" icon="el-icon-printer" size="small" @click="PrintNow">打印</el-button>
          </el-col>
        </el-row>
      </div>
      <div id="printPanel" :style="{position:'relative',width:paterSize.width+'mm',height:paterSize.height+'mm','box-shadow':'1px 1px 10px 0px rgba(185, 185, 185, 0.5)'}">
        <div
          v-for="(section,sectionIndex) in sections"
          :key="sectionIndex"
          :x="section.x"
          :y="section.y"
          :w="section.width"
          :h="section.height"
          :style="{position:'absolute',width:section.width+'px',height:section.height+'px',left:section.x+'px',top:section.y+'px'}"
        >
          <div v-if="section.type==='text'" class="sectionText" :style="{lineHeight:section.lineHeight+'px',fontSize:section.fontSize+'px',textAlign:section.textAlign,fontWeight:section.fontWeight}">
            <span v-if="section.textType==='field'">{{ section.field||'字段' }}</span>
            <span v-else>{{ section.text||'文本' }}</span>
          </div>
          <div v-else-if="section.type==='formitem'" class="sectionFormItem" :style="{lineHeight:section.lineHeight+'px',fontSize:section.fontSize+'px',textAlign:section.textAlign,fontWeight:section.fontWeight}">
            <span>{{ section.text||'标题' }}：</span>
            <span>{{ section.field||'字段' }}</span>
          </div>
          <div v-else-if="section.type==='image'" class="sectionImage">
            <img v-if="section.urlType==='field'&&section.urlDemo" :src="section.urlDemo" :style="{width:section.width+'px',height:section.height+'px'}">
            <img v-else-if="section.urlType==='url'&&section.url" :src="section.url" :style="{width:section.width+'px',height:section.height+'px'}">
          </div>
          <div v-else-if="section.type==='qr'" class="sectionQr">
            <vueQr v-if="section.codeType==='field'" :size="section.width" :text="section.codeDemo||'123456'" />
            <vueQr v-else-if="section.codeType==='code'" :size="section.width" :text="section.code||'123456'" />
          </div>
          <div v-else-if="section.type==='table'" class="sectionTable">
            <table border="1" cellspacing="0" cellpadding="0" :width="section.width">
              <thead>
                <tr>
                  <th v-for="(column,i) in section.columns" :key="i" :width="column.width" :style="{lineHeight:section.headerLineHeight+'px'}">{{ column.title }}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,i) in section.list" :key="i">
                  <td v-for="(column,c) in section.columns" :key="c" :align="column.align" :style="{lineHeight:section.bodyLineHeight+'px'}">{{ item[column.value] }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

      </div>
    </el-dialog>
  </div>
</template>
<script>
// import draggable from 'vuedraggable'
import draggable from 'vue-draggable-resizable-gorkys'
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
import RightDialog from '@/components/RightDialog'
import printJS from 'print-js'
import vueQr from 'vue-qr'

// 尺子单位mm
// 区块单位px

const textConfig = { width: 200, height: 30, lineHeight: 30, x: 10, y: 10, fontSize: 14, textAlign: 'left', fontWeight: 'normal' }
const formItemConfig = { width: 200, height: 30, lineHeight: 30, x: 10, y: 10, fontSize: 14, textAlign: 'left', fontWeight: 'normal' }
const imageConfig = { width: 200, height: 200, x: 10, y: 10 }
const qrConfig = { width: 300, height: 300, x: 10, y: 10 }
const tableConfig = { width: 600, height: 300, x: 10, y: 10, headerLineHeight: 30, bodyLineHeight: 30 }
export default {
  components: { draggable, RightDialog, vueQr },
  // directives: { print },
  data() {
    return {
      mainHeight: window.innerHeight - 200,
      demoImg: 'http://www.2100nian.cn/wp-content/uploads/2020/08/hehua.jpg', demoSize: { width: 200, height: 200 },
      sectionConfig: [
        {
          title: '文本', type: 'text', icon: 'el-icon-document'
        },
        {
          title: '表单项', type: 'formitem', icon: 'el-icon-c-scale-to-original'
        },
        {
          title: '图片', type: 'image', icon: 'el-icon-picture-outline'
        },
        {
          title: '二维码', type: 'qr', icon: 'iconfont icon-erweima'
        },
        {
          title: '表格', type: 'table', icon: 'el-icon-s-grid'
        }
      ],
      paperList: [
        { title: 'A3', width: 420, height: 297 },
        { title: 'A4', width: 210, height: 297 },
        { title: 'A5', width: 210, height: 148 },
        { title: 'B3', width: 500, height: 353 },
        { title: 'B4', width: 250, height: 297 },
        { title: 'B5', width: 250, height: 176 }
      ],
      paterIndex: 1,
      paterSize: { width: 210, height: 297 },
      lineHeightOptions: [
        { title: '24px', value: 24 },
        { title: '26px', value: 26 },
        { title: '28px', value: 28 },
        { title: '30px', value: 30 },
        { title: '32px', value: 32 },
        { title: '34px', value: 34 },
        { title: '36px', value: 36 },
        { title: '38px', value: 38 },
        { title: '40px', value: 40 }
      ],
      fontSizeOptions: [
        { title: '12px', value: 12 },
        { title: '14px', value: 14 },
        { title: '16px', value: 16 },
        { title: '18px', value: 18 },
        { title: '20px', value: 20 },
        { title: '22px', value: 22 },
        { title: '24px', value: 24 },
        { title: '30px', value: 30 }
      ],
      sections: [],
      sectionActiveIndex: -1,
      sectionDataIsShow: false, sectionInfo: null,
      viewDialogIsShow: false,
      columnsConfig: [// 参考，未用
        { title: '标题', value: 'title' },
        { title: '字段名', value: 'value' },
        { title: '列宽', value: 'width' },
        { title: '对齐', value: 'align', width: '80' },
        { title: '', value: 'del' }
      ],
      tableColumns: [],
      tableList: []

    }
  },
  methods: {
    PrintNow() {
      printJS({
        printable: 'printPanel',
        documentTitle: '入库单',
        type: 'html',
        scanStyles: false
      })
      // this.$print(this.$refs.printPanel)
    },
    paterChange(i) {
      this.paterIndex = i
      var pater = Object.assign({}, this.paperList[i])
      this.paterSize = { width: pater.width, height: pater.height }
    },
    sectionTypeSelect(section) {
      // textType :文本取值来源，text 固定不变，field 字段值
      // text :固定显示文本
      // field :字段名
      // label :表单项左侧文本
      if (section.type === 'text') {
        const newSection = Object.assign({ type: 'text', textType: 'text', text: '', field: '', desc: '文本', title: section.title }, textConfig)
        this.sections.push(newSection)
      } else if (section.type === 'formitem') {
        // const newSection = Object.assign({ type: 'formitem', text: '', labelType: 'text', labelField: '',textType: 'field', text: '', field: '', desc: '表单项', title: section.title }, formItemConfig)
        const newSection = Object.assign({ type: 'formitem', text: '', field: '', desc: '表单项', title: section.title }, formItemConfig)
        this.sections.push(newSection)
      } else if (section.type === 'image') {
        const newSection = Object.assign({ type: 'image', urlType: 'field', field: '', url: '', urlDemo: '', desc: '图片' }, imageConfig)
        this.sections.push(newSection)
      } else if (section.type === 'qr') {
        const newSection = Object.assign({ type: 'qr', codeType: 'field', field: '', code: '', codeDemo: '', desc: '二维码' }, qrConfig)
        this.sections.push(newSection)
      } else if (section.type === 'table') {
        const newSection = Object.assign({ type: 'table', desc: '表格', list: [], columns: [] }, tableConfig)
        this.sections.push(newSection)
      }
    },
    tableColumnAdd() {
      this.tableColumns.push({ value: '', title: '', width: '', align: 'left' })
    },
    tableColumnDel(i) {
      this.tableColumns.splice(i, 1)
    },
    tableListAdd() {
      this.tableList.push({})
    },
    tableListDel(i) {
      this.tableList.splice(i, 1)
    },
    useDemoTable() {
      this.tableColumns = [
        { value: 'product', title: '商品', width: '', align: 'left' },
        { value: 'price', title: '价格', width: '', align: 'left' },
        { value: 'num', title: '数量', width: '', align: 'left' }
      ]
      this.tableList = [
        { product: '苹果', price: 3, num: 20 },
        { product: '桃子', price: 2, num: 50 },
        { product: '火龙果', price: 5, num: 30 },
        { product: '橙子', price: 6, num: 60 },
        { product: '芒果', price: 5, num: 10 },
        { product: '提子', price: 6, num: 100 }
      ]
    },
    onClick(index) {
      console.log(index)
      this.sectionActiveIndex = index
      this.sectionDataShow()
    },
    pageClick(e) {
      console.log(e)
      if (!e.target.closest('.sectionDrag') && !e.target.closest('.rightPanel') && !e.target.closest('.s')) {
        this.sectionActiveIndex = -1
        this.sectionDataHide()
      }
    },
    sectionDataShow() {
      var section = Object.assign({}, this.sections[this.sectionActiveIndex])
      delete section.width
      delete section.height
      delete section.x
      delete section.y
      if (section.type === 'table') {
        this.tableColumns = Object.assign([], section.columns)
        this.tableList = Object.assign([], section.list)
        delete section.columns
        delete section.list
      }
      this.sectionInfo = section
      this.sectionDataIsShow = true
      console.log(this.sections[this.sectionActiveIndex])
    },
    sectionDataHide() {
      this.sectionInfo = null
      this.sectionDataIsShow = false
    },
    sectionDataSave() {
      var section = this.sections[this.sectionActiveIndex]
      this.sections[this.sectionActiveIndex] = Object.assign(section, this.sectionInfo)
      if (section.type === 'table') {
        // Object.assign无效
        section.columns = JSON.parse(JSON.stringify(this.tableColumns))
        section.list = JSON.parse(JSON.stringify(this.tableList))
      }
    },
    sectionDataRemove() {
      this.sections.splice(this.sectionActiveIndex, 1)
      this.sectionDataHide()
    },
    sectionClearAll() {
      this.sections = []
      this.sectionActiveIndex = -1
      this.sectionDataHide()
    },
    sectionView() {
      this.viewDialogIsShow = true
    },
    onResize: function(index, x, y, width, height) {
      console.log(index)
      this.sections[index].x = x
      this.sections[index].y = y
      this.sections[index].width = width
      this.sections[index].height = height
    },
    onDragIng: function(index, x, y) {
      console.log(index)
      this.sections[index].x = x
      this.sections[index].y = y
    }
  }

}
</script>
<style lang="scss" scoped>
  .sectionItem{
    .sectionbox{

      padding: 20px 0;cursor: pointer;user-select:none;

      &:hover{
        box-shadow: 0 0 5px 1px rgba(209, 209, 209, 0.8);text-shadow: 0.1px 0.1px;
      }
      &:active{
        box-shadow: 0 0 10px 2px rgba(189, 189, 189, 0.8);
      }
      .icon{
        font-size:20px;
      }
    }

  }
  .ruleMain{
    position: relative;overflow: hidden;padding:15px;display:inline-block;
    .rule{
      position: absolute;width: 400mm;
    }
    .rule1{
      left:15px;top:2px;
    }
    .rule2{
      left:12px;top:15px;
      transform: rotate(90deg);
      transform-origin:0 0;
    }
    .paterMain{
      position: relative;
      background-position: center center;background-repeat: no-repeat;
      // box-shadow: 1px 1px 10px 0px rgba(185, 185, 185, 0.5);
      border: 1px dashed rgba(185, 185, 185, 0.5);
      // .sectionImage{
      //   width: 100%;height: 100%;
      //   img{
      //     width: 100%;height: 100%;
      //   }
      // }
      .sectionQr{
        img{
          width:100%;height: 100%;
        }
      }
      .sectionDesc{
        position: absolute;left: 0;top:100%;margin-top: 5px;
        font-size: 10px;color:#999;
      }

    }
  }
  .el-form--label-top{
    .el-form-item{
      margin-bottom: 5px !important;
      .el-form-item__label{
        padding:0px !important;
      }
    }
  }
  .rightDialog{
    .dialog-title{
      font-size:18px;margin-bottom:10px;text-align:left;
      i,span{
        display: inline-block;vertical-align: middle;line-height:30px;height:30px;
      }
    }
  }

  .demoImg{
    width:200px;height: 200px;border: 1px dashed #CCC;
  }

</style>
